<template>
  <el-dialog v-bind="$attrs" @close="handleClose" @open="handleOpen" bodyStyle="padding:0px">
    <el-row class="overflow-y-auto" style="max-height: 60vh">
      <el-table
        ref="moduleTable"
        v-loading="listLoading"
        :show-overflow-tooltip="true"
        :data="ModuleData"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        stripe
      >
        <el-table-column type="selection"/>
        <el-table-column
          prop="roleId"
          :label="$t('system.ram.capability')"
          width="200"
        >
          <template v-slot="{row}">
            {{ $t(roleMap[row.roleName].name) }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system.ram.introduction')"
          prop="roleName"
        >
          <template v-slot="{row}">
            <span style="word-break: break-word">
              {{ $t(roleMap[row.roleName].intro) }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button text @click="handleClose">{{
          $t('common.cancel')
        }}</el-button>
        <el-button
          type="primary"
          :loading="confirmLoading"
          @click="handleConfirm"
        >
          {{ $t('common.confirm') }}
        </el-button>
      </span></template
    >
  </el-dialog>
</template>

<script>
import { editUser } from '@/api/user'
import { listModule } from '@/api/role'

export default {
  props: ['ramInfo'],
  data() {
    return {
      roleMap: {
        OPERATOR: {
          name: 'system.ram.cap.operator',
          intro: 'system.ram.cap.intro_operator'
        },
        REPORT: {
          name: 'system.ram.cap.report',
          intro: 'system.ram.cap.intro_report'
        },
        'PI MANAGEMENT': {
          name: 'system.ram.cap.pi_management',
          intro: 'system.ram.cap.intro_pi_management'
        },
        'FLYCARE NOTIFY CONFIG': {
          name: 'system.ram.cap.flycare_notify_config',
          intro: 'system.ram.cap.intro_flycare_notify_config'
        }
      },
      roleId: [],
      ModuleData: [],
      listLoading: false,
      confirmLoading: false,
      form: {
        name: '',
        status: '0',
        userId: null,
        orgId: '',
        userType: 2,
        countryCode: '',
        roleList: [],
        remark: '',
        storeUuid: ''
      },
      orgId: '',
      countryCode: ''
    }
  },
  methods: {
    initSelect() {
      const selectData = []
      if (this.ramInfo.roleList) {
        this.ramInfo.roleList.forEach((role) => {
          this.ModuleData.forEach((row) => {
            if (role.roleId === row.roleId) {
              selectData.push(row)
            }
          })
        })
      }
      return selectData
    },
    handleSelectionChange(val) {
      this.form.roleList = []
      val.forEach((row) => {
        this.form.roleList.push(row)
      })
    },
    handleRowClick(row) {
      this.$refs.moduleTable.toggleRowSelection(row)
    },
    toggleSelection(rows) {
      this.$nextTick(() => {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.moduleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.moduleTable.clearSelection()
        }
      })
    },
    getAllModules() {
      this.listLoading = true
      listModule({
        platCode: 'RAM'
      })
        .then((res) => {
          console.log('res', res)
          this.ModuleData = res
          const rows = this.initSelect()
          console.log(res)
          console.log(rows)
          this.toggleSelection(rows)
        })
        .catch(this.$confirmError)
        .finally(() => {
          this.listLoading = false
        })
    },

    handleOpen() {
      this.getAllModules()
    },
    handleConfirm() {
      console.log(111, this.ramInfo)
      this.confirmLoading = true
      this.form.userId = this.ramInfo.userId
      this.form.name = this.ramInfo.name
      this.form.orgId = this.ramInfo.orgId
      this.form.countryCode = this.ramInfo.countryCode
      this.form.storeUuid = this.ramInfo.storeUuid
      this.form.remark = this.ramInfo.remark
      this.form.status = this.ramInfo.status
      editUser(this.form)
        .then(() => {
          this.confirmLoading = false
          this.$message.success(this.$t('system.ram.edit_success'))
          this.$emit('submit')
          this.handleClose()
        })
        .catch((e) => {
          this.$confirmError(e)
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    handleClose() {
      this.confirmLoading = false
      this.$emit('update:model-value', false)
    }
  }
}
</script>

<style>
</style>
